<template>
	<view class="page-container">
		<view class="tab-view-container ">
			<view class="tn-float-left qiandao-view" :class="activeName == 0?'activeTab':''" @touchend="changeActiveTab(0)">
				进行中
			</view>
			<view class="tn-float-left qiandao-view" :class="activeName == 3?'activeTab':''" @touchend="changeActiveTab(3)">
				已完成
			</view>
			<view class="tn-float-left qiandao-view" :class="activeName == 2?'activeTab':''" @touchend="changeActiveTab(2)">
				已结束
			</view>
		</view>
		<view class="botton-content" v-if="dataList.length">
			<view class="content-item" v-for="(item, index) in dataList" :key="index">
				<view class="icon15__item--icon tn-flex tn-flex-col-center tn-flex-row-center"  @click="goDetail(item)">
				  <!-- <text class="tn-icon-trophy" style="font-size: 80rpx; color: #01BEFF;"></text> -->
				  <image v-if="activeName == 0" class="task-icon" src="../../static/progress.png"></image>
				  <image v-if="activeName == 3" class="task-icon" src="../../static/completed.png"></image>
				  <image v-if="activeName == 2" class="task-icon" src="../../static/ended.png"></image>
				</view>
				<view class="view-left tn-flex-1"  @click="goDetail(item)">
					<view class="item-title">{{item.title}}</view>
					<view class="item-msg color-2">{{item.content}}</view>
				</view>
				<tn-button v-if="activeName == 0" class="view-btn" shape="round" backgroundColor="#79CF67" fontColor="#ffffff" size="sm" @click="gowancheng(item)">去完成</tn-button>
				<view v-if="activeName == 3" class="view-wancheng">
					<!-- <text class="tn-icon-success-square" style="font-size: 42rpx; color: #24f083;"></text>
					<view class="view-txt">今日已完成</view> -->
					<image src="../../static/completedIcon.png" style="width: 88rpx;height:88rpx"></image>
				</view>
			</view>
		</view>
		
		<view class="tn-margin-top-xl tn-padding-top tn-flex tn-flex-row-center" v-else>
			<!-- <tn-empty mode="data"></tn-empty> -->
			<customEmpty empty-text="抱歉，暂无任何亲子任务～"></customEmpty>
		</view>
	</view>
</template>

<script>
	
	export default {
		name: 'youerruyuan',
		data(){
			return {
				activeName: 0,
				dataList: []
			}
		},
		onShow() {
			this.getrenwulist()
		},
		mounted() {
			// this.getrenwulist()
		},
		methods: {
			changeActiveTab(index){
				this.activeName = index;
				this.getrenwulist()
			},
			goDetail(item){
				uni.navigateTo({
					url: '/pagesA/qinziyouer/renwuDetail?id='+item.id
				})
			},
			gowancheng(item){
				console.log(item)
				uni.navigateTo({
					url: '/pagesA/qinziyouer/wancheng?id='+item.id
				})	
			},
			
			getrenwulist(){
				let params = {
					State: this.activeName
				}
							this.dataList = [];
				this.request({
					url: '/ParentChildTasks/TasksList',
					method: 'get',
					params: params,
				}).then(res => {
					
						if(res.code == 200){
							let rows = res.data;
							rows.forEach(item => {
								// if(item.images && item.images.length){
								// 	item.images.forEach(_img => {
								// 		_img['src'] = this.imageTitle + _img.filedId;
								// 	})
								// }
								this.dataList.push(item);
							})
						}
				})
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.page-container{
		min-height: 100vh;
		background-color: #F3F3F3;
	}
	.tab-view-container{
		overflow: hidden;
		background-color: #fff;
		line-height: 88rpx;
		height: 88rpx;
		padding:16rpx 32rpx;
	}
	.botton-content{
		padding: 26rpx;
	}
	.qiandao-view{
		margin-right: 20px;
		line-height: 36rpx;
		font-size: 32rpx;
		color: #86909C
	}
	.activeTab{
		color: #1D2129;
		font-size: 40rpx;
		font-weight: bold;
	}
	.content-item{
		padding: 20rpx;
		position: relative;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 26rpx;
		display: flex;
		align-items: center;
			
		.task-icon{
			width:100%;
			height:100%;
		}
	}
	.icon15__item--icon{
		width: 120rpx;
		text-align: center;
		height: 120rpx;
	}
	.view-left{
		margin-left: 16rpx;
		.item-title{
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
			height: 40rpx;
			overflow: hidden;
		}
		.item-msg{
			font-size: 26rpx;
			overflow: hidden;
			color: rgba(0,0,0,0.60);
		}
	}
		.view-btn{
			
		}
	.view-wancheng{
		width: 150rpx;
		height: 120rpx;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		text-align: center;
		.text-btom{
			position: absolute;
			bottom: 15rpx;
			color: #2de8bd;
		}
		.view-txt{
			width: 170rpx;
			margin-left:-12rpx;
			color: #24f083;
		}
	}
	.line-view{
		border-bottom: 1px solid #dddddd;
	}
	.littlcolor{
		color: #888888;
	}
	.color-2{
		color: #555555;
	}
</style>